import {Form, Modal, Radio} from 'antd';
import ProForm, { ProFormSelect, ProFormText, ProFormTextArea} from '@ant-design/pro-form';
import {useEffect, useState} from "react";
import {getUserGroup, getUserLable, getUserLevel} from "@/services/ant-design-pro/users";

const AddList = (props) => {
  const {isShow,closedUser,openUser} = props;
  const [form] = Form.useForm();
  const [value,setValue] = useState(1);

  // 关于显示和隐藏状态的事件
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  // 请求用户分组，等级，标签的接口
  useEffect(async ()=>{
    // 用户分组
    const group = await getUserGroup()
    group.data.map(item=>{item.title})

    // 用户等级
    const level = await getUserLevel()
    level.data.map(item=>{item.title})

    // 用户标签
    const lable = await getUserLable()
    lable.data.map(item=>{item.title})

  },[])

  return (
    <div>
      <Modal
        title='添加用户'
        visible={isShow}
        destroyOnClose={true}
        onOk={()=>{
          form.validateFields().then(async values=>{
            openUser(values)
          })
        }}
        onCancel={closedUser}
      >
        <ProForm
          form={form}
         submitter={false}
        >
            <ProFormText
              width="lg"
              name="name"
              label="真实姓名"
              tooltip="最长为 24 位"
            />
            <ProFormText
              width="lg"
              name="phone"
              label="手机号码"
              placeholder="请输入名称"
              rules={[{required:true,message:'请输入手机号！'}]}
            />
            <ProFormText
              name='birthday'
              width="lg"
              label="生日"
              placeholder="请选择生日！"
            />
          <ProFormText
            name='num'
            width="lg"
            label="身份证号"
            placeholder="请输入身份证号！"
          />
          <ProFormText
            name='address'
            width="lg"
            label="用户地址"
            placeholder="请输入用户地址！"
          />
          <ProFormTextArea
            name='think'
            width="lg"
            label="用户备注"
            placeholder="请输入用户备注！"
          />
          <ProFormText
            name='password'
            width="lg"
            label="登录密码"
            placeholder="请输入登录密码！"
          />
          <ProFormText
            name='editPassword'
            width="lg"
            label="确认密码"
            placeholder="请再次确认密码！"
          />
          <ProFormSelect
            name='grade'
            width="lg"
            label="用户等级"
            placeholder="请选择用户等级！"
            valueEnum={{
              open:'v1',
              closed:'v2',
              num:'v3',
              length:'v4',
              num1:'v5',
            }}
          />
          <ProFormSelect
            name='group'
            width="lg"
            label="用户分组"
            placeholder="请选择用户分组！"
            valueEnum={{
              open:'中低消费人群',
              closed:'中高消费人群',
              num:'高消费人群',
            }}
          />
          <ProFormSelect
            name='label'
            width="lg"
            label="用户标签"
            placeholder="请选择用户标签！"
            valueEnum={{
              open:'沉默客户',
              closed:'发展客户',
              num:'成熟客户',
              length:'重要客户',
            }}
          />
          <ProForm.Item
            name="num"
            label="推广资格"
            tooltip='禁用用户的推广资源后，在任何分销的模式下用户都无分销权限'
          >
            <Radio.Group onChange={onChange} value={value}>
              <Radio value={1}>启用</Radio>
              <Radio value={2}>禁用</Radio>
            </Radio.Group>
          </ProForm.Item>
          <ProForm.Item
            name="用户状态"
            label="推广资格"
          >
            <Radio.Group onChange={onChange} value={value}>
              <Radio value={1}>开启</Radio>
              <Radio value={2}>锁定</Radio>
            </Radio.Group>
          </ProForm.Item>
        </ProForm>
      </Modal>
    </div>
  );
};

export default AddList;
